<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form
        :model="query"
        :inline="true"
        size="mini"
        label-position="right"
        label-width="70px"
      >
        <el-form-item label="题目">
          <el-input
            v-model="query.title"
            placeholder="题目"
            suffix-icon="“xxxx”"
          />
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select
            v-model="query.type"
            size="mini"
            placeholder="请选择题目类型"
          >
            <el-option
              v-for="(key, value) in questionType"
              :key="key"
              :label="key"
              :value="value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            plain
            @click="getQuestionList()"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="query = { pageNo: 1, pageSize: 20, total: 0 }"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px">
        <el-button
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
        >
          <router-link :to="'/work/questionInfo?workTemplateId='+workTemplateId">添加题目</router-link>
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column align="center" label="题目ID" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="200px"
        align="center"
        :show-overflow-tooltip="true"
        label="题目"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.title"></span>
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="题目类型">
        <template slot-scope="scope">
          <span>{{ questionType[scope.row.type] }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ctime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="分数">
        <template slot-scope="scope">
          <span>{{ scope.row.score}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/work/questionInfo',
              query: {
                id: scope.row.id,
                workTemplateId:workTemplateId
              },
            }"
          >
            <el-button type="primary" size="mini">查看</el-button>
          </router-link>
          <el-button
            type="danger"
            @click="delQuestion(scope.row.id)"
            size="mini"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pageSize"
      :total="query.total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import { parseTime, getQueryObject } from "@/utils/index";
import { questionList } from "@/api/question.js";
import { delQuestion } from "@/api/work.js";

export default {
  name: "QuestionList",
  directives: { waves },
  filters: {
    parseTime(time) {
      return parseTime(time);
    },
  },
  data() {
    return {
      questionType: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "情景题",
        5: "简答题",
        6: "辨析题",
        7: "填空",
        8: "完形填空",
        9: "阅读理解",
        10: "背景题",
      },
      listLoading: false,
      list: [],
      workTemplateId: -1,
      workStatus: undefined,
      query: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      token:''
    };
  },
  watch: {
    activeName: function () {
      this.getQuestionList();
    },
  },
  created() {
    this.workTemplateId = getQueryObject()["workTemplateId"];
    this.workStatus = getQueryObject()["workStatus"];
    this.getQuestionList();
  },
  methods: {
    getQuestionList() {
      this.listLoading = true;
      this.query.activeName = this.activeName;
      this.query.sort = "desc_q.ctime";
      this.query.workTemplateId = this.workTemplateId;
      this.query.isNew = 2;
      if (!this.query.year) {
        delete this.query.year;
      }
      questionList(this.query).then((res) => {
        this.list = res.data;
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getQuestionList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getQuestionList();
    },
    delQuestion(id) {
      let ids = [];
      ids.push(id);
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delQuestion(ids).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getQuestionList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.page {
  margin-top: 10px;
}

.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
